<%--
  Created by IntelliJ IDEA.
  User: Fan
  Date: 2025/9/8
  Time: 18:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="header.jsp"/>
<style>
    :root {
        --primary-color: #4a6fc0;
        --primary-hover: #3b5aa6;
        --secondary-color: #6c757d;
        --success-color: #198754;
        --danger-color: #dc3545;
        --light-bg: #f8f9fa;
        --border-color: #dee2e6;
        --switch-bg: #e9ecef;
        --switch-checked-bg: #198754;
    }

    body {
        background-color: #f5f7fb;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
    }

    .form-container {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 2rem;
        max-width: 1000px;
        margin: 0 auto;
    }

    .form-header {
        background: white;
        color: #333;
        padding: 1.8rem 2rem;
        text-align: center;
        position: relative;
        border-bottom: 1px solid var(--border-color);
    }

    .form-header h1 {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--primary-color);
    }

    .form-header p {
        opacity: 0.8;
        margin-bottom: 0;
        color: var(--secondary-color);
    }

    .form-body {
        padding: 2.5rem 2rem;
    }

    .section-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 1.2rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--light-bg);
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 10px;
        font-size: 1.4rem;
    }

    .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: #444;
    }

    .form-label.required::after {
        content: " *";
        color: var(--danger-color);
    }

    .form-control, .form-select {
        padding: 0.75rem 1rem;
        border: 2px solid var(--border-color);
        border-radius: 8px;
        transition: all 0.3s;
    }

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.25rem rgba(74, 111, 192, 0.25);
    }

    .readonly-field {
        background-color: var(--light-bg);
        color: var(--secondary-color);
        cursor: not-allowed;
    }

    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    .btn {
        padding: 0.7rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s;
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .btn-primary:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
        transform: translateY(-2px);
    }

    .btn-secondary {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #5a6268;
    }

    .form-control.is-invalid, .form-select.is-invalid {
        border-color: var(--danger-color);
        padding-right: calc(1.5em + 0.75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4'/%3e%3cpath d='M6 7.5v-4'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }

    .invalid-feedback {
        display: none;
        width: 100%;
        margin-top: 0.35rem;
        font-size: 0.875em;
        color: var(--danger-color);
    }

    .is-invalid ~ .invalid-feedback {
        display: block;
    }

    .info-tooltip {
        color: var(--secondary-color);
        margin-left: 5px;
        cursor: pointer;
    }

    /* Switch 样式 */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--switch-bg);
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: var(--switch-checked-bg);
    }

    input:checked + .slider:before {
        transform: translateX(26px);
    }

    .switch-label {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    @media (max-width: 768px) {
        .form-body {
            padding: 1.5rem 1rem;
        }

        .form-header {
            padding: 1.2rem 1rem;
        }

        .btn {
            width: 100%;
            margin-bottom: 10px;
        }

        .button-group {
            flex-direction: column;
        }
    }

    .success-message {
        display: none;
        background-color: #d4edda;
        color: #155724;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        text-align: center;
    }
</style>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">更新课程</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <button type="button" class="btn btn-primary btn-sm" onclick="window.location.href='coursemanage'">
            <i class="bi bi-arrow-left-circle"></i> 返回课程管理
        </button>
    </div>
</div>

<div class="form-container">

    <div class="form-body">
        <!-- 显示成功消息 -->
        <c:if test="${not empty success}">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle-fill"></i> ${success}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </c:if>

        <!-- 显示错误消息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle-fill"></i> ${error}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </c:if>

        <form id="courseForm" method="post" action="${pageContext.request.contextPath}/coursemanage/update">
            <input type="hidden" name="id" value="${course.id}">

            <div class="section-title">
                <i class="bi bi-info-circle"></i> 基本信息
            </div>

            <div class="row mb-4">
                <div class="col-md-6 mb-3">
                    <label for="courseName" class="form-label required">课程名称</label>
                    <input type="text" class="form-control" name="course_name" id="courseName"
                           placeholder="例如：高等数学、Java程序设计" required value="${course.name}">
                    <div class="invalid-feedback">请输入课程名称</div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6 mb-3">
                    <label for="subject_id" class="form-label required">专业科目</label>
                    <select class="form-select" name="subject_id" id="subject_id" required>
                        <option value="">-- 请选择专业 --</option>
                        <c:forEach items="${subjects}" var="subject">
                            <option value="${subject.id}"
                                    <c:if test="${subject.id == course.subjectId}">selected</c:if>>${subject.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="section-title">
                <i class="bi bi-text-paragraph"></i> 课程描述
            </div>

            <div class="mb-4">
                <label for="description" class="form-label required">课程详细描述</label>
                <textarea class="form-control" name="description" id="description" rows="4"
                          placeholder="请输入课程的详细描述、教学目标、适用对象等信息..."
                          required>${course.description}</textarea>
                <div class="invalid-feedback">请输入课程描述</div>
                <small class="form-text text-muted">建议字数在50-500字之间</small>
            </div>

            <div class="section-title">
                <i class="bi bi-toggle-on"></i> 课程状态
            </div>

            <div class="mb-4">
                <label class="form-label">状态</label>
                <div class="switch-label">
                    <span>禁用</span>
                    <label class="switch">
                        <input type="checkbox" name="state" id="state"
                               <c:if test="${course.state}">checked</c:if>>
                        <span class="slider"></span>
                    </label>
                    <span>启用</span>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2 button-group">
                <div class="search-actions">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='coursemanage'">取消
                    </button>
                    <button type="reset" class="btn btn-outline-secondary">重置</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-lg"></i> 更新
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 添加自动消失的消息Modal -->
<div class="modal fade" id="autoDismissModal" tabindex="-1" aria-labelledby="autoDismissModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="autoDismissModalLabel">提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <i id="modalIcon" class="bi" style="font-size: 3rem;"></i>
                <h5 id="modalTitle" class="mt-3"></h5>
                <p id="modalMessage" class="mb-0"></p>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const courseForm = document.getElementById('courseForm');

        // 显示自动消失的Modal
        function showAutoDismissModal(message, isSuccess) {
            const modalElement = document.getElementById('autoDismissModal');
            const modalIcon = document.getElementById('modalIcon');
            const modalTitle = document.getElementById('modalTitle');
            const modalMessage = document.getElementById('modalMessage');

            // 设置图标和样式
            if (isSuccess) {
                modalIcon.className = 'bi bi-check-circle-fill text-success';
                modalTitle.textContent = '成功';
                modalTitle.className = 'mt-3 text-success';
            } else {
                modalIcon.className = 'bi bi-exclamation-triangle-fill text-danger';
                modalTitle.textContent = '错误';
                modalTitle.className = 'mt-3 text-danger';
            }

            // 设置消息内容
            modalMessage.textContent = message;

            // 显示Modal
            const modal = new bootstrap.Modal(modalElement);
            modal.show();

            // 3秒后自动关闭
            setTimeout(function () {
                modal.hide();
            }, 3000);
        }

        // 检查是否有服务器端传递的成功消息
        <c:if test="${not empty success}">
        showAutoDismissModal('${success}', true);
        </c:if>

        // 检查是否有服务器端传递的错误消息
        <c:if test="${not empty error}">
        showAutoDismissModal('${error}', false);
        </c:if>

        if (courseForm) {
            const inputs = courseForm.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('input', function () {
                    if (this.value.trim()) {
                        this.classList.remove('is-invalid');
                    }
                });
            });
        }

        const resetButton = document.querySelector('button[type="reset"]');
        if (resetButton) {
            resetButton.addEventListener('click', function () {
                const invalidFields = document.querySelectorAll('.is-invalid');
                invalidFields.forEach(field => {
                    field.classList.remove('is-invalid');
                });
            });
        }
    });
</script>

<jsp:include page="footer.jsp"/>
